
<style>
.collection-text-picture-swiper-v2-main{
  height: 400px;
  padding-top: 100px;
}

.cc-tooltip:after,.cc-tooltip:before{
    content: "";
    display: block;
    position: absolute;
    background: #f6f6f6;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .5);
    box-shadow: 0 0 4px #00000080;
    width: 16px;
    height: 16px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 50%;
    top: 13px;
    margin-bottom: -7px;
    margin-left: -9px;
    border-radius: 2px;
    z-index: -1;
}
.cc-tooltip:before {
    content: "";
    z-index: 12;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}
a.cc-menu-item {
    text-decoration: unset;
}

.cc-bg-item{    
    box-shadow: 0 0 4px #00000080;
    background: #f6f6f6;
    width: max-content;
    height: auto;
    overflow: auto;
    transform: translate(-50%, 20px);
    padding: 10px;
    box-sizing: border-box;
    max-width: 450px;
    flex-flow: wrap;
    display: flex;
    max-height: 100%;
    position: absolute;
    left: 50%;
}
p.color-list-li {
    display: block;
    width: 40px;
    height: 40px;
    background: #ccc;
    border-radius: 5px;
    margin: 0 auto;
}
.shop-by-rabric-aling {
    width: 20%;
    padding: 15px 0;
    min-width: 80px;
}
.cc-menu-item span {
    display: block;
    width: 100%;
    text-align: center;
    color: #000;
    padding-top: 10px;
    padding-inline: 5px;
    font-size: 13px;
    line-height: 1.2;
}

@media screen and (min-width:768px){  
   
.cc-section-main {
    width: 100%;
    box-sizing: border-box;
}
.cc-gallery {
    display: flex;
    justify-content: center;
    align-items: end;
    height: 120px;
}
.cc-item {
    position: relative;
}
.cc-color-itopm{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transition: all 0.5s;
    border-color: #ffc3c8;
    border: 2px solid transparent;
}
.cc-color-box{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
.cc-color-box img {
    width: 100%;
}
.cc-swiper-container {
    height: 120px;
}
.cc-tooltip {
    width: 450px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: calc(100% - 1px);
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
}
span.cc-text {
    display: block;
    text-align: center;
    margin-top: 6px;
}
.cc-item.swiper-slide:hover .cc-tooltip {
    opacity: 1;
    pointer-events: unset;
}
.cc-tooltip:after,.cc-tooltip:before{
    content: "";
    display: block;
    position: absolute;
    background: #f6f6f6;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .5);
    box-shadow: 0 0 4px #00000080;
    width: 16px;
    height: 16px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 50%;
    top: 13px;
    margin-bottom: -7px;
    margin-left: -9px;
    border-radius: 2px;
    z-index: -1;
}
.cc-tooltip:before {
    content: "";
    z-index: 12;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}
.cc-item.swiper-slide.cc-prev .cc-color-itopm,
.cc-item.swiper-slide.cc-open .cc-color-itopm,
.cc-item.swiper-slide.cc-next .cc-color-itopm{
    width: 100px;
    height: 100px;
}
.cc-open .cc-color-itopm{
    border: 2px solid #ffc3c8;
    padding: 6px;
} 
.cc-item.swiper-slide{
    flex-shrink: unset;
    width: auto;
    height: auto;
    padding: 0 5px;
    
    transition: all 0.5s;
}

.cc-item.swiper-slide:first-child .cc-tooltip,.cc-item.swiper-slide:last-child .cc-tooltip{transform: translateX(0%);}
.cc-item.swiper-slide:first-child .cc-tooltip{left: 0;}
.cc-item.swiper-slide:last-child .cc-tooltip{left: -370px;}
.cc-item.swiper-slide:first-child .cc-tooltip:before,
.cc-item.swiper-slide:first-child .cc-tooltip:after{left: 52px;}
.cc-item.swiper-slide:last-child .cc-tooltip:before,
.cc-item.swiper-slide:last-child .cc-tooltip:after{left: calc(100% - 26px);}
}

@media screen and (max-width:1600px) and (min-width:768px){
    .cc-box {zoom: 0.8;} 
}
@media screen and (max-width:1366px) and (min-width:768px){
    .cc-box {zoom: 0.65;} 
}

@media (max-width:768px){
     .cc-color-box img {
        width: 100%;
    }
    .cc-section-main .cc-item{
        width: calc(100vw / 6.1);        
    }
    .cc-color-itopm{
        width: calc(100vw / 6.1);
        height: calc(100vw / 6.1);
    }
    .cc-color-box{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #f0f0f0;
        overflow: hidden;
    }
    
    span.cc-text {
        display: block;
        text-align: center;
        margin-top: 6px;
        font-size: 11px;
    }    
    .cc-tooltip {
        width: 300px;
        height: 180px;
        position: absolute;
        left: 50%;
        top: calc(100% - 1px);
        transform: translateX(-50%);
        opacity: 0;
        pointer-events: none;
    }
    .cc-bg-item{
        box-shadow: 0 0 4px #00000080;
        background: #f6f6f6;
        width: auto;
        height: 100%;
        overflow: auto;
        transform: translateY(20px);
        padding: 30px 10px;
        box-sizing: border-box;
        max-width: 450px;
        flex-flow: wrap;
        display: flex;
        position: unset;
    }
    .cc-open .cc-tooltip{
        opacity: 1;
        pointer-events: unset;
    }
    .cc-item.swiper-slide:nth-child(2) .cc-tooltip{
        left: -30px;
        transform: translateX(0%);
    }
    .cc-item.swiper-slide:first-child .cc-tooltip{
        left: 0;
        transform: translateX(0%);
    }
    .cc-item.swiper-slide:nth-last-child(2) .cc-tooltip{
        left: calc(100% - 260px);
        top: calc(100% - 1px);
        transform: translateX(0%);

    }
    .cc-item.swiper-slide:last-child .cc-tooltip{
        left: calc(100% - 300px);
        top: calc(100% - 1px);
        transform: translateX(0%);
    }
    .shop-by-rabric-aling {
        min-width: 70px;
    }
    .cc-menu-item span {
        font-size: 11px;
    }
    .cc-item.swiper-slide:first-child .cc-tooltip:before,
    .cc-item.swiper-slide:first-child .cc-tooltip:after{left: 32px;}
    .cc-item.swiper-slide:nth-child(2) .cc-tooltip:before,
    .cc-item.swiper-slide:nth-child(2) .cc-tooltip:after{left: 64px;}

    .cc-item.swiper-slide:last-child .cc-tooltip:before,
    .cc-item.swiper-slide:last-child .cc-tooltip:after{left: calc(100% - 35px);}
    .cc-item.swiper-slide:nth-last-child(2) .cc-tooltip:before,
    .cc-item.swiper-slide:nth-last-child(2) .cc-tooltip:after{left: calc(100% - 70px);}
}

</style>
<div class="collection-text-picture-swiper-v2-main">
{%- if section.settings.menu != blank -%}

<div class="cc-section-main">
<div class="cc-swiper-container">
<div class="swiper-wrapper cc-gallery">
  {%- for link in section.settings.menu.links -%}
    <div class="cc-item swiper-slide">
        <div class="cc-box">
            <div class="cc-color-itopm">
                <div class="cc-color-box">
                    {% for block in section.blocks %}
                    {% if link.title == block.settings.handle %}
                        <img src="{{ block.settings.image | img_url: 'master' }}" class="cc-c-i">
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
            <span class="cc-text">{{ link.title }}</span>
        </div>
        <div class="cc-tooltip">
            <div class="cc-icon"></div>
            <div class="cc-bg-item">
              {%- if link.links != blank -%}
                {%- for childlink in link.links -%}
                  <div class="shop-by-rabric-aling">
                    <a href="{{ childlink.url }}" class="cc-menu-item">
                      <p class="color-list-li {{ childlink.title | escape | replace: ' ', '-' }}"></p>
                      <span>{{ childlink.title | escape }}</span>
                    </a>
                  </div>
                {%- endfor -%}
              {%- endif -%}
              
              {% if link.title == "ALL" %}
                {%- for linkall in section.settings.menu.links -%}
                    {%- if linkall.links != blank -%}
                        {%- for childlinkall in linkall.links -%}
                        <div class="shop-by-rabric-aling">
                            <a href="{{ childlinkall.url }}" class="cc-menu-item">
                            <p class="color-list-li {{ childlinkall.title | escape | replace: ' ', '-' }}"></p>
                            <span>{{ childlinkall.title | escape }}</span>
                            </a>
                        </div>
                        {%- endfor -%}
                    {%- endif -%}
                {%- endfor -%}
              {% endif %}
            </div>
        </div>
    </div>
  {%- endfor -%}

</div>
</div>
</div>
{%- endif -%}    
</div>

<script>
let ccItems = document.querySelectorAll('.cc-item.swiper-slide');
if (window.outerWidth>768) {
    ccItems.forEach(item => {
        item.addEventListener('mouseover', handleMouseOver);
        item.addEventListener('mouseout', handleMouseOut); 
    });
}else{
    let ccswiper = new Swiper('.cc-swiper-container', {
        slidesPerView: "auto",
        centeredSlides: false,
        spaceBetween: 10,
        loop: false,
        on:{
            touchMove: function(swiper,event){
                swiper.params.centeredSlides = false;
                swiper.update();
                handleMouseOut();
            }
        }
    });

    document.querySelectorAll('.swiper-slide.cc-item').forEach((slide, index) => {
        slide.addEventListener('click', () => {
            handleMouseOut();
            slide.classList.add('cc-open');
            const totalSlides = ccswiper.slides.length;
            let toIndex=index - 2;
            ccswiper.slideTo(toIndex);
        });
    });
    
    document.addEventListener('click', function (e){
        console.log(e.target);
        if(!e.target.classList.contains('cc-color-box')&&
            !e.target.classList.contains('cc-c-i')&&
            !e.target.classList.contains('cc-bg-item')&&
            !e.target.classList.contains('cc-text')&&
            !e.target.classList.contains('cc-box')&&
            !e.target.classList.contains('cc-color-itopm')&&
            !e.target.classList.contains('cc-tooltip')
            ){
            {% comment %} handleMouseOut(); {% endcomment %}
        } 
    });
}
  


function handleMouseOver(e) {
    const currentItem = e.currentTarget;
    // 先移除所有相关类名
    ccItems.forEach(item => {
        item.classList.remove('cc-open', 'cc-prev', 'cc-next');
    });
    
    // 添加当前项的open类
    currentItem.classList.add('cc-open');
    
    // 获取上一个兄弟项（需验证是否是cc-item）
    const prevItem = currentItem.previousElementSibling;
    if (prevItem && prevItem.classList.contains('cc-item') && prevItem.classList.contains('swiper-slide')) {
        prevItem.classList.add('cc-prev');
    }
    
    // 获取下一个兄弟项（需验证是否是cc-item）
    const nextItem = currentItem.nextElementSibling;
    if (nextItem && nextItem.classList.contains('cc-item') && nextItem.classList.contains('swiper-slide')) {
        nextItem.classList.add('cc-next');
    }
}

// 鼠标移出时移除所有类（可选，根据需求决定是否保留）
function handleMouseOut() {
    ccItems.forEach(item => {
        item.classList.remove('cc-open', 'cc-prev', 'cc-next');
    });
}
</script>
{% schema %}
{
  "name": "v1 颜色列表",
  "settings": [
    {
        "type": "text",
        "id": "title",
        "label": "标题"
    },
    {
      "type": "link_list",
      "id": "menu",
      "label": "添加导航"
    }
  ],
    "blocks": [
        {
        "type": "banner",
        "name": "配置图片",
        "settings": [
            {
                "type": "text",
                "id": "handle",
                "label": "一级导航标题"
            }, 
            {
                "type": "image_picker",
                "id": "image",
                "label": "图片"
            }
        ]
        }    
    ],
  "presets": [
    {
      "name": "v1 颜色列表"
    }
  ]
}
{% endschema %}
